<template>
	<div class="page-container">
		<el-card class="page-card" :body-style="{ padding: '24px !important' }">
			<el-table ref="goodsDown" v-loading="loading" :data="list" stripe>
				<el-table-column align="center" label="序号" type="index" width="55" />
				<el-table-column align="center" label="支付方式" min-width="156" prop="payType" />
				<el-table-column align="center" label="支付公司" min-width="156" prop="company" />
				<el-table-column align="center" label="是否开启" prop="open" min-width="156">
					<template slot-scope="scope">
						<el-switch v-model="scope.row.open" :disabled="!scope.row.introduce" active-text="是" class="switch" inactive-text="否" @change="handleUpdate(scope.row)" />
					</template>
				</el-table-column>
				<el-table-column align="center" label="接入状态" prop="introduce" min-width="156">
					<template #default="{ row }">
						<span v-if="row.introduce">已接入</span>
						<span v-else>未接入</span>
					</template>
				</el-table-column>
				<el-table-column :formatter="emptyToString" align="center" label="创建时间" min-width="200" prop="createTime">
					<template slot-scope="scope">
						<div class="w-full flex flex-col items-center">
							<span>{{ dayjs(scope.row.createTime).format('YYYY-MM-DD') }}</span>
							<span>{{ dayjs(scope.row.createTime).format('HH:mm:ss') }}</span>
						</div>
					</template>
				</el-table-column>
			</el-table>
		</el-card>
	</div>
</template>
<script>
import { paySettingEdit, paySettingEditSort, paySettingList } from '@/api/mall/paySetting';
import tableMix from '@/mixins/table';
export default {
	name: 'Pay',
	mixins: [tableMix],
	data: () => ({
		list: [],
	}),
	created() {
		this.getList();
	},
	methods: {
		getList() {
			this.loading = true;
			paySettingList({ type: 0 }).then((res) => {
				this.list = res.data;
				this.loading = false;
			});
		},
		handleUpdate(row) {
			this.loading = true;
			paySettingEdit(row).then((res) => {
				this.$message.success('修改成功!');
				this.getList();
			});
		},
		sortUpdate(id, type) {
			this.loading = true;
			paySettingEditSort({ id, type }).then((res) => {
				this.$message.success('修改成功!');
				this.getList();
			});
		},
	},
};
</script>
<style lang="scss" scoped>
.form {
	width: 300px;
	margin: 0 auto;
	height: 350px;
}

.title {
	font-size: 18px;
	font-weight: bold;
	padding-top: 25px;
}

.btn {
	margin: 40px auto;
	width: 321px;
	height: 44px;
	background: #6373ee;
	border-radius: 4px;
	font-size: 14px;
	color: #ffffff;
	line-height: 44px;
	text-align: center;
	cursor: pointer;
}
</style>
